<!--
 * @Description: 底部按钮
 * @Author: HuiSir<https://gitee.com/huisir001>
 * @Date: 2025-07-16 16:31:35
 * @LastEditTime: 2025-09-28 18:26:45
-->
<template>
  <div
    class="page-btn"
    :style="{
      '--align': align,
      '--z-index': zIndex,
      '--top': position === 'top' ? '0' : 'unset',
      '--bottom': position === 'bottom' ? '0' : 'unset',
      '--padding':
        position === 'top'
          ? `${offset + 15}px 0 15px`
          : `15px 0 ${offset + 15}px`,
    }"
  >
    <slot name="left" />
    <el-button
      v-if="!useSlot"
      :type="type"
      :disabled="disabled"
      :loading="loading"
      @click="submit"
    >
      {{ label }}
    </el-button>
    <slot name="right" />
  </div>
</template>

<script lang="ts" setup>
import { type PropType } from "vue";

// 组件名称（必要）
defineOptions({ name: "FyPageBtn" });

const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  label: {
    type: String,
    default: "保存",
  },
  type: {
    type: String,
    default: "primary",
  },
  align: {
    type: String as PropType<"center" | "left" | "right">,
    default: "right",
  },
  position: {
    type: String as PropType<"top" | "bottom">,
    default: "bottom",
  },
  zIndex: {
    type: Number,
    default: 100,
  },
  offset: {
    type: Number,
    default: 0,
  },
  useSlot: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["submit"]);

const submit = () => {
  if (!props.disabled && !props.loading) {
    emit("submit");
  }
};
</script>

<style lang="scss" scoped>
.page-btn {
  position: sticky;
  background: #ffffff;
  display: block;
  width: 100%;
  padding: var(--padding);
  text-align: var(--align);
  z-index: var(--z-index);
  top: var(--top);
  bottom: var(--bottom);
  :deep(.el-button) {
    padding: 8px 30px !important;
  }
}
</style>
